<template>
  <div id="usercenter">
    <header1></header1>

    <div class="userinfo-banner layout-no-margin-top">
      <div class="container layout">
        <div class="row">
          <div class="col-md-9 clearfix" >
            <div class="pull-left userinfo-banner-avatar">
              <div class="user-avatar">
                <router-link  to="/spacecp" class="avatar" target="_blank">
                  <img :src="users.img" /> <br>  
                  <router-link to="/spacecp"><button>个人设置</button></router-link>         
                </router-link>

                <a class="member-icon" href="../../vip/index.html" target="_blank">
                  <img src />
                </a>
              </div>
            </div>
            <div class="pull-left userinfo-banner-details">
              <div class="userinfo-banner-meta">
                <div class="user-username">
                  <a onclick="return false;" class="username" href="#" target="_blank">{{users.username}}</a>
                  <span class="user-level">L195</span>
                </div>
              </div>
              <div class="userinfo-banner-meta">
                <div class="user-username">
                  <a onclick="return false;"  class="username" href="#" target="_blank">级别：</a>
                  <span class="user-level">{{users.level | levelname}}</span>
                    <a onclick="return false;" class="username" href="#" target="_blank">积分：</a>
                  <span class="user-level">{{users.integral}}分</span>
                </div>
              </div>  
              <div class="userinfo-banner-status">
                <span>学生</span>

                <a href="/edu/1" target="_blank">北京大学</a>
                <span>邀请码：{{users.invitation_code}}</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 userinfo-banner-labinfo">
            <div class="userinfo-banner-level">
              <img src="../../static/img/lou-level.png" />
              <div class="userinfo-current-level">
                <span>195</span> 楼
              </div>
              <div
                class="userinfo-level-more"
                data-toggle="tooltip"
                data-placement="bottom"
                title="在实验环境中动手输入代码或命令时才计入有效学习时间"
              >距 196 楼还需 16 分钟有效学习时间</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container layout">
      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="content">
            <ul class="nav nav-tabs">
              <li :class="{'active':this.whatActive ==='course'}">
                <a @click="showWhat('course')">我的课程</a>
              </li>
              <li :class="{'active':this.whatActive ==='report'}">
                <a @click="showWhat('report')">我的报告</a>
              </li>
              
              <!-- <li :class="{'active':this.whatActive ==='comment'}">
                <a @click="showWhat('comment')">实验讨论</a>
              </li> -->

              <li :class="{'active':this.whatActive ==='coupon'}">
                <a @click="showWhat('coupon')">优惠券</a>
              </li>
              <li :class="{'active':this.whatActive ==='couponcenter'}">
                <a @click="showWhat('couponcenter')">优惠券专领处</a>
              </li>                 
              <li  :class="{'active':this.whatActive ==='teacher'}">
                <a @click="showWhat('teacher')">关注的老师</a>
              </li>
              <!---->
            </ul>

            <div class="tab-content">
              <div :class="{'tab-pane':true,'active':this.whatActive ==='course'}"
               >
                <div class="row">
                  <!-- <div class="col-md-12">
                    <a>
                      <span class="label label-success">学过的</span>
                    </a>
                    <a href="study.html">
                      <span class="label label-default">关注的</span>
                    </a>
                  
                    <a href="study.html">
                      <span class="label label-default">发布的</span>
                    </a>
                    
                  </div> -->

                  <div class="col-md-4 col-sm-6 course" v-for="i in courses">
                    <a class="course-box" href="../../courses/show.html">
                    <router-link :to="{path:'/showcourse',query:{id:i.id}}">
                      <div class="sign-box">
                        <!---->
                        <!---->
                      </div>
                      <div class="course-img">
                        <!---->
                        <img :src="i.pic"/>
                        <!---->
                      </div>
                      <!---->
                      <div class="course-body">
                        <span
                          class="course-title"
                          data-toggle="tooltip"
                          data-placement="bottom"
                          title="Windows Server 2012 IIS 服务安装部署实战"
                        >{{i.title}}</span>
                      </div>
                    </router-link> 
                      <div class="course-footer">
                        <span class="course-per-num pull-left">
                          <i class="fa fa-users"></i>
                          <!---->
                          {{i.attention}}
                          <!---->
                        </span>
                        <!---->
                        <!---->
                        <!-- <span class="course-money pull-right">{{ i.member | levelname }}</span> -->
                        <!---->
                        <!---->
                      </div>
                    </a>
                  </div>

                  <nav class="pagination-container">
                    <ul class="pagination">
                      <!---->
                      <li class="disabled">
                        <a href="#" aria-label="Previous">
                          <span aria-hidden="true">上一页</span>
                        </a>
                      </li>
                      <!---->
                      <!---->
                      <li class="active">
                        <a href="/user/13?page=1">1</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=2">2</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=3">3</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=4">4</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=5">5</a>
                      </li>
                      <!---->
                      <!---->
                      <li>
                        <a href="#">...</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=16">16</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a href="/user/13?page=17">17</a>
                      </li>
                      <!---->
                      <!---->
                      <li class>
                        <a aria-label="Next" href="/user/13?page=2">
                          <span aria-hidden="true">下一页</span>
                        </a>
                      </li>
                      <!---->
                    </ul>
                  </nav>
                </div>
              </div>
              
              <div :class="{'tab-pane':true,'active':this.whatActive ==='report'}">
                <!-- <div class="row">
                  <div class="col-md-12">
                    <a>
                      <span class="label label-success">话题</span>
                    </a>
                    <a href="/user/13/answers">
                      <span class="label label-default">回复</span>
                    </a>
                    <a href="/user/13/favorite">
                      <span class="label label-default">收藏</span>
                    </a>
                  </div>
                </div> -->
                <ul class="row question-items" v-for="i in reports">
                  <li class="question-item">
                    <div class="col-md-10">
                      <div class="col-sm-2 question-item-author">
                        <div class="user-avatar">
                          <!-- <a class="avatar" href="/user/13" target="_blank">
                            <img
                              src="https://dn-simplecloud.shiyanlou.com/gravatarc51ce410c124a10e0db5e4b97fc2af39.png?v=1439957390221&amp;imageView2/1/w/200/h/200"
                            />
                          </a> -->

                          <!-- <a class="member-icon" href="/vip" target="_blank">
                            <img src="../../static/img/vip-icon.png" />
                          </a> -->
                        </div>
                      </div>
                      <div class="col-sm-10">
                        <router-link :to="{path:'/baogao',query:{'sid':i.section_id,'course_id':i.course,'user_id':user_id,'section_id':i.id}}">
                        <h4>

                          {{i.report_title}}
                          
                        </h4>
                        </router-link>
                        <!-- <div class="question-item-summary">
                          <div class="user-username">
                            <a class="username" href="/user/13" target="_blank">石头山</a>
                            <span class="user-level">L195</span>
                          </div>

                          <span class="question-item-date">2016-12-16 12:49</span>
                          最后回复
                          <span class="question-item-date">
                            <div class="user-username">
                              <a class="username" href="/user/3858" target="_blank">Cloud君</a>
                              <span class="user-level">L28</span>
                            </div>
                          </span>
                        </div> -->

                      </div>
                    </div>

                    <div class="col-md-2 question-item-rank">
                      <div class="question-item-answered">
                        <div>{{i.report_browse}}</div>
                        <div>浏览量</div>
                      </div>
                      <div class="question-item-views">
                        <div>{{i.link_num}}</div>
                        <div>点赞数</div>
                      </div>
                    </div>

                  </li>
                </ul>

                <nav class="pagination-container">
                  <ul class="pagination">
                    <li class="disabled">
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                      </a>
                    </li>

                    <li class="active">
                      <a href="/user/13/questions?page=1">1</a>
                    </li>

                    <li class>
                      <a href="/user/13/questions?page=2">2</a>
                    </li>

                    <li class>
                      <a aria-label="Next" href="/user/13/questions?page=2">
                        <span aria-hidden="true">下一页</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
              <div :class="{'tab-pane':true,'active':this.whatActive ==='comment'}">
                <div class="row">
                  <div class="row report-items">
                    <div class="col-md-3 report-item clearfix">
                      <a href="reports_show.html">
                        <div class="report-item-course">新手指南之玩转实验楼</div>
                        <div class="report-item-lab">Hello World!</div>
                        <div class="tags">
                          <span class="tag tag-primary">C/C++</span>
                        </div>
                        <div class="report-item-count">
                          <span>719 字</span>
                          <div class="report-item-arrow">
                            <div class="report-item-arrow-line"></div>
                          </div>
                        </div>
                      </a>
                      <div class="col-xs-8">
                        <div class="report-item-author">
                          <div class="user-avatar report-item-avatar">
                            <a class="avatar" href="/user/13" target="_blank">
                              <img
                                src="https://dn-simplecloud.shiyanlou.com/gravatarc51ce410c124a10e0db5e4b97fc2af39.png?v=1439957390221&amp;imageView2/1/w/200/h/200"
                              />
                            </a>
                            <a class="member-icon" href="/vip" target="_blank">
                              <img src="../../static/img/vip-icon.png" />
                            </a>
                          </div>

                          <div class="user-username">
                            <a class="username" href="/user/13" target="_blank">石头山</a>
                            <span class="user-level">L195</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="pull-right report-item-comments">
                          <i class="fa fa-comments-o"></i>
                          1
                        </div>
                        <div class="pull-right report-item-update">2016-12-27 08:41</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div :class="{'tab-pane':true,'active':this.whatActive ==='coupon'}">
                <div class="row">
                  <div class="row report-items">
                    <div class="col-md-4 report-item clearfix" v-for="i in mycoupon" :key="i.id">
                      <a>
                        <div class="report-item-course">{{i.couponname}}</div>
                        <div class="report-item-lab">
                          <!-- 数量：{{i.count}} -->
                        </div>
                        <div class="tags">
           
                          <span class="tag tag-primary">开始时间：{{i.start_time |formatDate}}</span>
                          <span class="tag tag-primary">结束时间：{{i.end_time |formatDate}}</span>
                        </div>
                        <div class="report-item-count">
                          <!-- <span>{{i.status | hanhua}}</span> -->
                          <div class="report-item-arrow">
                            <div class="report-item-arrow-line"></div>
                          </div>
                        </div>
                        <div>满{{i.condition}}减{{i.money}}</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div :class="{'tab-pane':true,'active':this.whatActive ==='couponcenter'}">
                <div class="row">
                  <div class="row report-items">
                    <div class="col-md-4 report-item clearfix" v-for="i in coupons" :key="i.id">
                      <a @click="getCoupon(i.id)">
                        <div class="report-item-course">{{i.name}}</div>
                        <div class="report-item-lab">剩余数量：{{i.count}}</div>
                        <div class="tags">
                          <!-- <span class="tag tag-primary">{{i.type_name}}</span> -->
                          <span class="tag tag-primary">开始时间：{{i.start_time|formatDate}}</span>
                          <span class="tag tag-primary">结束时间：{{i.end_time|formatDate}}</span>
                        </div>
                        <div class="report-item-count">
                          <span>{{i.status | hanhua}}</span>
                          <div class="report-item-arrow">
                            <div class="report-item-arrow-line"></div>
                          </div>
                        </div>
                        <div>满{{i.condition}}减{{i.money}}</div>
                        <div class="coupons-item-get">获取</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" :class="{'tab-pane':true,'active':this.whatActive ==='teacher'}" >
                <div class="row">
                  <div class="col-sm-6" >
                    <div class="path-item" v-for="item in userTeacher">
                      <div class="col-xs-5 col-md-4 path-img">
                        <img :src="item.teacherpic" />
                      </div>
                      <div class="col-xs-7 col-md-8">
                        <div class="path-name">{{item.teachername}}</div>
                        <div class="path-course-num">
                          <span>{{item.teacherdescribe}}</span> 
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3 layout-side">
          <a class="side-sda apply-git" href="http://git.shiyanlou.com/shilei" target="_blank">
            <img src="../../static/img/my-git.png" />
            <span>代码库</span>
          </a>
          <div class="sidebox user-visitors">
            <div class="sidebox-header">
              <h4 class="sidebox-title">最近来访</h4>
            </div>
            <div class="sidebox-body">
              <div class="col-dm-12">
                <a class="row" href="/user/345538">
                  <div class="col-xs-2">
                    <img
                      src="https://dn-simplecloud.shiyanlou.com/gravatar345538.png?v=1483141057082&amp;imageView2/1/w/200/h/200"
                    />
                  </div>
                  <div class="col-xs-10">
                    <div>PKU_Hao</div>
                    <div>12分钟前</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer1></footer1>
  </div>
</template>

<script>
import header from "@/components/header";
import footer from "@/components/footer";
import { getMyCoupon } from "../api/api.js";
import { formatTimeToStr } from "../data/data.js";
export default {
  name: "usercenter",
  components: {
    header1: header,
    footer1: footer
  },
  data: function() {
    return {
      courses:"",
      reports:"",
      users: "",
      token: localStorage.getItem("token"),
      user_id: localStorage.getItem("user_id"),
      username: localStorage.getItem("username"),

      whatActive: "course",
      mycoupon: [],
      coupons: [],
      usercoupons: [],
      userTeacher:[],
    };
  },
  mounted() {
    //用户关注的课程
    this.axios({
        url: "/api/getattcourse/?id="+this.user_id,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.courses = res.data.data;
        }else{
          // alert(res.message)
        }
      });
    //用户发布的报告
    this.axios({
        url: "/api/userreport/?id="+this.user_id,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.reports = res.data.data;
        }else{
          alert(res.message)
        }
      });  
    // 获取用户数据
    this.axios({
      url: "/api/userlist/",
      method: "post",
      data: { user_id: this.user_id, username: this.username }
    }).then(res => {
      if (res.data.code == 200) {
        this.users = res.data.users;
      }
    });
  },
  methods: {

    getCoupon: function(id) {
      var params = {
        user_id: this.user_id,
        coupon_id: id
      };
      getMyCoupon(params).then(res => {
        console.log(res);
        if (res.code == 200) {
          var data = res.message;
          this.showCoupons();
          alert(data);
        } else if (res.code == 10010) {
          var data = res.message;
          alert(data);
        } else {
          var data = res.message;
          alert(data);
        }
      });
    },
    showCoupons: function() {
      this.axios({
        url: "/api/userCoupons/",
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.coupons = res.data.data;
        }
      });
    },
    showCoupon: function() {
      this.axios({
        url: "/api/userCoupon/?id=" + this.user_id,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.mycoupon = res.data.data;
        }
      });
    },
    showWhat: function(type) {
      this.whatActive = type;
      if (this.whatActive === "couponcenter") {
        this.showCoupons();
      } else if (this.whatActive === "coupon") {
        this.showCoupon();
      }
      else if (this.whatActive === "teacher") {
        this.showTeacher();
      }
    },
    showTeacher: function() {
      this.axios({
        url: "/api/showUserTeacher/?user_id="+this.user_id,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.userTeacher = res.data.data;
        }
      });
    },
  },
  filters: {
    hanhua: function(status) {
      if (status == 1) {
        return "可用";
      } else {
        return "过期";
      }
    },
    levelname:function(status) {
      if (status == 0) {
        return "普通用户";
      }else if(status == 1){
        return "会员";
      }else{
        return "高级会员";
      }
    },

    formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd");
        }else{
          return "";
        }
      }



  }
};
</script>

<style scoped>
.coupons-item-get {
  position: absolute;
  left: 100px;
  bottom: 20px;
  padding: 0 24px 0 12px;
  height: 24px;
  line-height: 22px;
  background: #fff;
  border: 1px solid #e3e8eb;
  font-size: 12px;
}
</style>
